<template>
  <div class="dashboard-container">
    
      <baidu-map class="map"  :center="center"  :zoom="zoom"  @ready="handler">
        <!-- 覆盖物-点(集合) -->
       <bm-point-collection v-if="points.length" :points="points" shape="BMAP_POINT_SHAPE_STAR" color="red" size="BMAP_POINT_SIZE_BIGGER" @click="clickHandler"></bm-point-collection>
  
        <!-- 覆盖物-弹出信息-->
      <bm-info-window autoPan :position="clickposition"  title="<span style='font-size:20px;'>设备信息</span>" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
      <el-row class="infoWindow">
        <el-col>区域设备总数量：{{infoWindow.data.facsum}}</el-col>
        <el-col>正常设备：{{infoWindow.data.normal}}</el-col>
        <el-col>故障设备：{{infoWindow.data.fault}}</el-col>
        <el-col>维护中设备：{{infoWindow.data.maintain}}</el-col>
      </el-row>
     <el-row class="infoWindowBtn" >
       <el-col :offset="18"><el-button v-preventReClick @click="clear" type="primary" size="mini">关闭</el-button></el-col>
     </el-row>
      
    </bm-info-window>
    <!-- 覆盖层 全部设备-->
    <el-card class="box-card allFac">
      <h3 style="margin-bottom:10px">当前全部设备信息</h3>
    <div>
      <el-row >
        <el-col>
          <count-to ref="countTo1" v-bind:uid=1  :end-val="allFac.facsum" :className="getClass">
            <span slot="left" >区域设备总数量： </span>
          </count-to>
          </el-col>
        <el-col>
          <count-to ref="countTo2" v-bind:uid=2 :end-val="allFac.normal" :className="getClass">
            <span slot="left" >正常设备： </span>
          </count-to>
          </el-col>
        <el-col>
          <count-to ref="countTo3" v-bind:uid=3 :end-val="allFac.fault" :className="getClass">
            <span slot="left" >故障设备： </span>
          </count-to>
          </el-col> 
        <el-col>
          <count-to ref="countTo4" v-bind:uid=4 :end-val="allFac.maintain" :className="getClass">
            <span slot="left" >维护中设备： </span>
          </count-to>
          </el-col>
      </el-row>
    </div>
  </el-card>
  <!-- 覆盖层 故障滚动信息-->
    <el-card class="box-card faultMessage">
      <h3 style="margin-bottom:10px">当前故障设备信息</h3>
    <div class="faultList" ref="faultlist">
      <vue-seamless-scroll
        :data="faultMessage"
        :class-option="seamlessScrollOption"
        style="
          height: 100px;
          overflow: hidden;
          color: rgb(211, 85, 119);
          font-size: 24px;
          text-align: center;
        "
      >
       <el-row v-for="(item, index) in faultMessage"
            :key="index">
         <el-col :span="8">
          {{ item.ErrorTime }}
         </el-col>
         <el-col :span="16" style="text-align:left;">
          {{ item.ErrNote }}
         </el-col>
       </el-row>
      </vue-seamless-scroll>

    </div>
  </el-card>
    
      </baidu-map>
   
  </div>
</template>
<script>

// import BaiduMap from 'vue-baidu-map/components/map/Map.vue' //百度地图按需引入
//scroll-wheel-zoom double-click-zoom  缩放和双击缩放属性
import { mapGetters } from 'vuex'
import style_map from '../../assets/map/custom_map_config.json'
import countTo from '@/components/countTo'

//调取数据接口
import { getFacCount, getpoints,getPointMessage } from '@/api/map'
import { getFaultList } from '@/api/facility/facility'

// import MyOverlay from '../../components/vue-baidu-map/map/myOverlay.vue'
export default {
  name: 'Dashboard',
  components: {
    // MyOverlay
    countTo
  },
  data(){
    return {
      center: {lng: 116.404, lat: 39.915},
      
      zoom: 6,
      //点合集
      points:[],
      clickposition:{},
      active: false,
      //所有设备
      allFac:{
        facsum:0,
        fault:0,
        maintain:0,
        normal:0,
      },
      total:0,
      listQuery: {
        page: 1,
        limit: 30,
        importance: undefined,
        title: undefined,
        type: undefined,
        sort: '+id'
      },

      //故障信息
      faultMessage:[
        
      ],
      //弹窗信息
      infoWindow: {
        show: false,
        data:{
         
        },
        contents: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
      }
    }
  },
  created(){
 const token=this.$store.getters.token
 const listQuery=this.listQuery
  
    //获取全部数据

     getFacCount(token).then(res=>{
        this.allFac=res.data[0]
        console.log(res)
      })
      //获取故障信息数据
      
     getFaultList({token,listQuery}).then(res=>{
      
        this.faultMessage=res.data.arr
      })
       //获取点集合
     getpoints(token).then(res=>{
        const points=res.data
        this.points = points

      })
  },
  mounted(){
   
  
  },
  computed: {
     
    // 返回自定义样式
    getClass() {
        return 'count-to-number'
    },
       
     ...mapGetters([
      'name'
    ]),
    seamlessScrollOption() {
      return {
        step: 0.1, // 数值越大速度滚动越快
        limitMoveNum: 3, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
      };
    },
  },
  methods:{
    handler ({BMap, map}) {
      let that=this
      that.map = map;
      
      this.center.lng =105.000
      this.center.lat = 38.000
      map.disableDoubleClickZoom(); 
      map.disableScrollWheelZoom();
      map.setMaxZoom(6)
      map.setMinZoom(6)

      map.setMapStyleV2({
                        styleId: 'ec745304c4bc9aa95045164ef7ec68d0'
                    });
     

    },
    // 点击展示信息
    clickHandler (e) {
      let that=this
       getPointMessage(e.point).then(res=>{
        that.infoWindow.data=res.data[0]
      })
     
      this.clickposition=e.point
      

      this.infoWindow.show=true
    },
   
    infoWindowClose (e) {
      this.infoWindow.show = false
    },
    infoWindowOpen (e) {
      this.infoWindow.show = true
    },
    clear () {
      this.infoWindow.contents = ''
      this.infoWindow.show = false

    }
  },
 
}
</script>

<style lang="scss" scoped>
.count-to-number {
        font-size: 8em;
        color: #4d63bc;
        font-weight: 300;
    }
    .prefix-style {
        font-size: 2em;
    }
.allFac{
  width: 240px;
  height: 240px;
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 999;
  font-size: 18px;
  color: rgb(68, 170, 198);
  background: rgba(52, 40, 40, 0.5);
  border: 1px solid rgba($color: #453d3d, $alpha: 1.0);
  div{
    font-size: 18px;
  }
}
.faultMessage{
  
  position: absolute;
  bottom: 10px;
  left: 10px;
  right: 10px;
  z-index: 999;
  font-size: 18px;
  color: rgb(211, 85, 119);
  background: rgba(52, 40, 40, 0.5);
  border: 1px solid rgba($color: #453d3d, $alpha: 1.0);
  .faultList{
    position: relative;
    height: 80px;
    overflow: hidden;
   
    }
 
  }

.infoWindow{
  font-size: 18px;
}
.dashboard {
  height: 100%;
  
  &-container {
    margin: 0;
    // background: red;
    height: calc(100vh - 50px);
    .map {
    width: 100%;
    height: 100%;
  }
  }
  
}

</style>
